<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    :scroll="{ x: 1200 }"
    class="ant-table-auto"
  >
    <template #order="text, row">
      {{ text }}
      <a-tag :color="themeColor" v-if="row.order_id == oid" style="margin-left: 8px;">
        当期
      </a-tag>
    </template>
    <template #repaydate="text">
      {{ text | empty }}
    </template>
    
    <template #duedate="text">
      {{ text | dateFormat('DD/MM/YYYY') }}
    </template>
    <template #repay_way="text">
      <template v-if="text == undefined || text == null">
        /
      </template>
      <template v-else>
        {{ text | repayWay }}
      </template>
    </template>
    <template #status="text">
      <template v-if="text">
        <i
          :class="['icon', {
            'icon--red': text === 2,
            'icon--green': text === 1 || text === 3
          }]"
        />
        {{ text | status }}
      </template>

      <template
        v-else
      >
        <span>/</span>
      </template>
    </template>
  </a-table>
</template>

<script>
import filters from '@/utils/mixins/order/repayment/filters'
import repayment from '@/utils/mixins/order/repayment/repayment'
import props from '../props'
const columns = [
  {
    title: '还款期数',
    dataIndex: 'order',
    width: '100px',
    scopedSlots: { customRender: 'order' },
  },
  {
    title: '到期日',
    dataIndex: 'duedate',
    width: '200px',
    scopedSlots: { customRender: 'duedate' },
    align: 'center',
  },
  {
    title: '逾期天数',
    dataIndex: 'due_days',
    align: 'center',
  },
  {
    title: '当期应还总金额$',
    dataIndex: 'amount',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '本金 $',
    dataIndex: 'principal',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '利息 $',
    dataIndex: 'interest',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '滞纳金 $',
    dataIndex: 'late_fee',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '手续费 $',
    dataIndex: 'charges',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '实际还款日期',
    dataIndex: 'repaydate',
    ellipsis: true,
    width: '200px',
    align: 'center',
    scopedSlots: { customRender: 'repaydate' },
  },
  {
    title: '还款方式',
    dataIndex: 'repayway',
    ellipsis: true,
    scopedSlots: { customRender: 'repay_way' },
    align: 'center',
  },
  {
    title: '还款状态',
    dataIndex: 'status',
    ellipsis: true,
    fixed: 'right',
    scopedSlots: { customRender: 'status' },
    align: 'center',
  },
]

export default {
  data () {
    return {
      columns,
    }
  },

  mixins: [filters, repayment, props],

  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: $margin-base;
}

.icon--red {
  background-color: $red;
}

.icon--green {
  background-color: $green;
}
</style>
